// import React, { useEffect, useState } from 'react';
// import styles from './index.scss';

// import yay from './img/2.jpeg'

// import { history } from 'umi';

// const gift = [
//     {
//         name: '1',
//     },
//     {
//         name: '2'
//     }, {
//         name: '3'
//     }, {
//         name: '4'
//     },
//     {
//         name: '5',
//     },
//     {
//         name: '6'
//     },
//     {
//         name: '7'
//     },
//     {
//         name: '8'
//     },
//     {
//         name: '9'
//     },
//     {
//         name: '10'
//     },
// ]
// function getColor() {
//     let colorValue = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'
//     let colorArray = colorValue.split(",")
//     let color = '#'
//     for (let i = 0; i < 6; i++) {
//         color += colorArray[Math.floor(Math.random() * 16)]
//     }
//     return color
// }

// function get_skew_deg(num) {
//     let average_deg = 360 / num

//     let skew_deg = 90 - average_deg

//     return skew_deg
// }

// function getItemStyle(num) {

//     let skew_deg = get_skew_deg(num)

//     let translateY = Math.tan(skew_deg * 2 * Math.PI / 360) * 100

//     let transform = `skew(0deg, -${skew_deg}deg) translateY(-${translateY}px)`

//     return {
//         transform,
//         backgroundColor: getColor(),
//     }
// }

// export default function () {
//     const [visible, setVisible] = useState(false);
//     const back = () => {
//         history.goBack();
//     };
//     const options1 = [
//         [
//             { name: '微信', icon: 'wechat' },
//             { name: '朋友圈', icon: 'wechat-moments' },
//             { name: '微博', icon: 'weibo' },
//             { name: 'QQ', icon: 'qq' },
//         ],
//         [
//             { name: '复制链接', icon: 'link' },
//             { name: '分享海报', icon: 'poster' },
//             { name: '二维码', icon: 'qrcode' },
//             { name: '小程序码', icon: 'weapp-qrcode' },
//         ],
//     ];
//     const right = (
//         <div style={{ fontSize: 24 }} onClick={() => setVisible(true)}>
//             <Space style={{ '--gap': '16px' }}>
//                 <ShareO />
//             </Space>
//             <ShareSheet
//                 visible={visible}
//                 options={options1}
//                 title="立即分享给好友"
//                 onCancel={() => setVisible(false)}
//                 onSelect={(option, index) => {
//                     setVisible(false);
//                 }}
//             />
//         </div>
//     );

//     return (
//         <>
//             <NavBar
//                 onBack={back}
//                 right={right}
//                 style={{
//                     backgroundColor: '#f6f5f6',
//                     position: ' sticky',
//                     top: '0',
//                     zIndex: '99999',
//                 }}
//             >
//                 抽奖
//             </NavBar>
//             <div className={styles.normal}>
//                 <div className={styles.turntable}>
//                     <div className={styles.content}>
//                         {gift.map((item, index) =>
//                             <div className={styles.box} key={item.name} style={{ transform: 'rotate(' + ((360 / gift.length) * index) + 'deg)' }}>
//                                 <div className={styles.item} style={getItemStyle(gift.length)}>
//                                     {item.name}
//                                     <div className={styles.info} style={{ transform: `skew(0deg, ${get_skew_deg(gift.length)}deg) rotate(${(-(360 / gift.length) * index)}deg)` }}>
//                                         <img style={{ display: 'block', width: 60, height: 60, borderRadius: '50%' }} src={yay} alt="" />
//                                     </div>
//                                 </div>
//                             </div>)
//                         }
//                     </div>
//                     <div className={styles.arrow}></div>
//                     <div className={styles.point}></div>
//                 </div>
//             </div>
//         </>

//     );
// }

import { Component } from 'react';
import './index.scss';
import { NavBar, Button, Space, Toast, Modal } from 'antd-mobile';
import { ShareO, WeappNav } from '@react-vant/icons';
import { ShareSheet } from 'react-vant';
import { history } from 'umi';
class RrawLotteryRaffle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 12, // 九宫格：8   12宫格：12
      allAwards: [],
      count: 0,
      times: 100,
      timer: null,
      nowTime: null,
      awardsId: null,
      isRolling: false,
      trophy: null, //奖品
      visible: false, //控制弹窗
      awardsSetting: [
        {
          id: 1,
          awardTitle: '100元优惠券',
        },
        {
          id: 2,
          awardTitle: '谢谢惠顾！',
        },
        {
          id: 3,
          awardTitle: '300元优惠券',
        },
        {
          id: 4,
          awardTitle: '400元优惠券',
        },
        {
          id: 6,
          awardTitle: '谢谢惠顾！',
        },
        {
          id: 7,
          awardTitle: '380元优惠券',
        },
        {
          id: 8,
          awardTitle: '50元优惠券',
        },
        {
          id: 5,
          awardTitle: '380元优惠券',
        },
        {
          id: 9,
          awardTitle: '谢谢惠顾！',
        },
        {
          id: 10,
          awardTitle: '50元优惠券',
        },
        {
          id: 11,
          awardTitle: '谢谢惠顾！',
        },
      ],
      winnerList: [
        {
          name: '张***三1',
          awards: '10元优惠券',
        },
        {
          name: '张***三2',
          awards: '10元优惠券',
        },
        {
          name: '张***三3',
          awards: '10元优惠券',
        },
        {
          name: '张***三4',
          awards: '10元优惠券',
        },
        {
          name: '张***三5',
          awards: '10元优惠券',
        },
        {
          name: '张***三6',
          awards: '10元优惠券',
        },
        {
          name: '张***三7',
          awards: '10元优惠券',
        },
      ],
      losingLottery: [
        {
          id: 1001,
          awardTitle: '谢谢惠顾！',
        },
      ],
      visibl1: false,
    };
    this.handleBegan = this.handleBegan.bind(this);
    this.decelerate = this.decelerate.bind(this);
  }

  back() {
    history.goBack();
  }

  /***
   * 设置奖项：奖项数量不够时补充谢谢惠顾
   * @param awards  奖项
   * @param none  谢谢惠顾奖项
   */
  setAwards(awards, none) {
    let arr = [];
    if (awards.length < this.state.num + 1) {
      let i = 0;
      while (i < this.state.num - awards.length + 1) {
        arr.push(...none);
        i++;
      }
    }
    this.setState({
      allAwards: this.setShuffle(arr.concat(awards)),
    });
    console.log(this.state.allAwards, 88888888);
  }
  setShuffle(dataList, data = []) {
    let n = dataList.length;
    while (n) {
      let idx = Math.floor(/*Math.random() **/ n--);
      data.push(...dataList.splice(idx));
    }
    return data;
  }
  /***
   * 点击抽奖按钮
   */
  handleBegan() {
    if (!this.state.isRolling) {
      // 初始化数据之后才可以开始
      this.setState(
        {
          count: 0,
          times: 100,
          timer: null,
          nowTime: null,
          awardsId: null,
          isRolling: true,
          nowTime: new Date(),
        },
        () => {
          this.handlePlay();
        },
      );
    }
  }
  // 开始抽奖
  handlePlay() {
    let timer = setTimeout(() => {
      let con = this.state.count;
      if (this.state.num == 8 && con === 7) {
        con = 0;
      } else if (this.state.num == 12 && con === 11) {
        con = 0;
      } else {
        con++;
      }
      this.setState({
        count: con,
      });
      if (new Date() - this.state.nowTime > 3000) {
        this.decelerate();
      }
      console.log(this.state.isRolling, 'this.state.isRolling');
      if (this.state.isRolling) {
        this.handlePlay();
      }
    }, this.state.times);
    this.setState({
      timer: timer,
    });
  }
  /***
   * 减速
   */
  decelerate() {
    if (this.state.times < 400) {
      this.setState({
        times: this.state.times + 20, //控制速度减的快慢
      });
    } else if (this.state.times < 500) {
      this.setState({
        times: this.state.times + 40, //控制速度减的快慢
      });
    } else {
      this.setState({
        times: this.state.times + 100, //控制速度减的快慢
      });
    }
    // if (this.state.times > 400) {
    // 模拟从后端获取到的中奖的数据
    this.setState({
      awardsId: null,
    });
    // }
    console.log(this.state.times, this.state.awardsId, '--------');
    // 判断获取的中奖id和当前id相同，则停止。
    if (
      this.state.times > 500 &&
      this.state.awardsId === this.state.allAwards[this.state.count].id
    ) {
      clearTimeout(this.state.timer);
      this.state.isRolling = false;
      this.setState({
        visible: true,
        trophy:
          '恭喜您获得' +
          this.state.allAwards[this.state.count].awardTitle +
          '!',
      });
    }
    // 后端返回未中奖，则判断当前id为1001（谢谢惠顾）时停止
    if (
      this.state.times > 500 &&
      this.state.awardsId == null &&
      this.state.allAwards[this.state.count].id == 1001
    ) {
      clearTimeout(this.state.timer);
      this.state.isRolling = false;
      this.setState({
        visible: true,
        trophy: '谢谢惠顾！',
      });
    }
  }
  componentDidMount() {
    this.setAwards(this.state.awardsSetting, this.state.losingLottery);
  }
  render() {
    return (
      <div className="award">
        <NavBar
          onBack={() => {
            this.back();
          }}
          style={{
            backgroundColor: 'red',
            position: ' sticky',
            top: '0',
            zIndex: '99999',
          }}
        >
          幸运大抽奖
        </NavBar>
        <div style={{ marginTop: '.3rem' }}>
          <ul
            className={
              'award-container ' +
              (this.state.num === 12 ? 'award-container-handle' : '')
            }
          >
            {this.state.allAwards.map((item, index) => {
              let shows = 'shade';
              shows = this.state.count === index ? ' shade' : '';
              return (
                <li
                  key={item.id + '' + index}
                  className={'award-item award-item-left award-item-' + index}
                >
                  <div className={shows}>
                    <span className="background-img"></span>
                    <span className="awardTitle">{item.awardTitle}</span>
                  </div>
                </li>
              );
            })}
            <li
              className={
                'award-item award-item-handle ' +
                (this.state.num === 12 ? 'award-item-handle-12' : '')
              }
              onClick={this.handleBegan}
            >
              <div>
                <Button className="award-btn awardTitle">开始抽奖</Button>
              </div>
            </li>
          </ul>
        </div>
        <div className="winner-list-box">
          <h4>获奖名单</h4>
          <div className="winner-list">
            <div>
              <ul>
                {this.state.winnerList.map((item, index) => {
                  return (
                    <li key={index}>
                      <span>{item.name}</span>
                      <span>{item.awards}</span>
                    </li>
                  );
                })}
              </ul>
              <ul>
                {this.state.winnerList.map((item, index) => {
                  return (
                    <li key={index}>
                      <span>{item.name}</span>
                      <span>{item.awards}</span>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>

        {/* 弹窗 */}
        <div
          className="common-dialog"
          style={{ display: this.state.visible ? 'block' : 'none' }}
          onClick={() => this.setState({ visible: false })}
        >
          <div>{this.state.trophy}</div>
        </div>
      </div>
    );
  }
}
export default RrawLotteryRaffle;
